<template>
  <div>
    <el-dialog
      title="新增"
      :visible.sync="BasicExpressCustomsShow"
      width="1200px"
      :before-close="close"
      destroy-on-close
      :modal="true"
      append-to-body>
      <el-form ref="form" :model="FormData" :rules="rules" label-width="140px">
        <el-row>
          <div class="curentTitle">基本信息</div>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="sku:" prop="skuNo">
              <el-input disabled v-model="FormData.skuNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="1">
            <el-button @click="autoPostSku" type="primary">自动分配</el-button>
            <!-- <div class="aotuGetSku"  >自动分配</div> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="额外sku:">
              <el-input v-model="FormData.skuExtra"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="中文名:" prop="skuNameCn">
              <el-input v-model="FormData.skuNameCn"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="日文名:" prop="skuNameJp">
              <el-input v-model="FormData.skuNameJp"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="英文名:" prop="skuNameEn">
              <el-input v-model="FormData.skuNameEn"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('商品分类')" prop="classId">
              <treeselect
                v-model="FormData.classId"
                :options="menuOptions"
                :show-count="true"
                :placeholder="$t('请选择')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="jan编码:" prop="janCode">
              <el-input disabled v-model="FormData.janCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="品牌:" prop="brand">
              <el-input v-model="FormData.brand"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品规格:" prop="specification">
              <el-input v-model="FormData.specification"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="长:" prop="skuLength">
              <el-input
                v-model="FormData.skuLength"
                style="width: 120px; margin-right: 4px"
                oninput="value=value.replace(/[^\d.]/g, '')"></el-input
              >cm
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宽:" prop="skuWidth">
              <el-input
                v-model="FormData.skuWidth"
                style="width: 120px; margin-right: 4px"
                oninput="value=value.replace(/[^\d.]/g, '')"></el-input
              >cm
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="高:" prop="skuHeight">
              <el-input
                v-model="FormData.skuHeight"
                style="width: 120px; margin-right: 4px"
                oninput="value=value.replace(/[^\d.]/g, '')"></el-input
              >cm
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重量:" prop="skuWeight">
              <el-input
                v-model="FormData.skuWeight"
                style="width: 120px; margin-right: 4px"
                oninput="value=value.replace(/[^\d.]/g, '')"></el-input
              >g
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="箱规:" prop="box">
              <el-input v-model="FormData.box" oninput="value=value.replace(/[^\d]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1" v-if="FormData.skuWeight">
            <el-form-item label="箱子重量:" prop="janCode">
              <div class="size">{{ FormData.skuWeight * FormData.box || 0 }}g</div>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label-width="90px" label="是否会过期:" prop="skuNameEn">
              <el-radio-group v-model="FormData.isExpired">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6" >
                            <el-form-item label-width="120px" label="最近过期时间:" prop="expireTime">
                                <div>{{ FormData.expireTime ? FormData.expireTime : '-' }}</div>
                            </el-form-item>
                        </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="FormData.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="采购备注:" prop="purchaseRemark">
              <el-input v-model="FormData.purchaseRemark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div class="curentTitle">快递信息</div>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="长:" prop="skuAttrLength">
              <el-input
                v-model="FormData.skuAttrLength"
                style="width: 120px; margin-right: 4px"
                oninput="value=value.replace(/[^\d.]/g, '')"></el-input
              >cm
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宽:" prop="skuAttrWidth">
              <el-input
                v-model="FormData.skuAttrWidth"
                style="width: 120px; margin-right: 4px"
                oninput="value=value.replace(/[^\d.]/g, '')"></el-input
              >cm
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="高:" prop="skuAttrHeight">
              <el-input
                v-model="FormData.skuAttrHeight"
                style="width: 120px; margin-right: 4px"
                oninput="value=value.replace(/[^\d.]/g, '')"></el-input
              >cm
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重量:" prop="skuAttrWeight">
              <el-input
                v-model="FormData.skuAttrWeight"
                style="width: 120px; margin-right: 4px"
                oninput="value=value.replace(/[^\d.]/g, '')"></el-input
              >g
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="日本发货备注:">
              <el-input v-model="FormData.jpDeliverRemark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="3">
            <el-form-item label="自社发货时效:">
              <el-input v-model="FormData.deliverAging"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="国内发货方式:" prop="deliverWayCn">
              <el-select @change="setRate" v-model="FormData.deliverWayCn">
                <!-- <el-option value="1" label="国内">
                国内
              </el-option>
              <el-option value="2" label="国外">
                国外
              </el-option> -->
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in deliver_goods_cn_list"
                  :key="index" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="国内发货倍率:">
              <div class="size">{{ FormData.deliverRate }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发货仓库-普发:" prop="deliverPositionNormal">
              <el-input v-model="FormData.deliverPositionNormal"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发货仓库-快速:" prop="deliverPositionFast">
              <el-input v-model="FormData.deliverPositionFast"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div class="curentTitle">报关信息</div>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="报关中文名:" prop="customsClearanceNameCn">
              <el-input v-model="FormData.customsClearanceNameCn"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="报关日文名:" prop="customsClearanceNameJp">
              <el-input v-model="FormData.customsClearanceNameJp"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="报关英文名:" prop="customsClearanceNameEn">
              <el-input v-model="FormData.customsClearanceNameEn"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="商品用途-中:" prop="skuUseCn">
              <el-input v-model="FormData.skuUseCn"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="3">
            <el-form-item label="商品用途-日:" prop="skuUseJp">
              <el-input v-model="FormData.skuUseJp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="3">
            <el-form-item label="商品用途-英:" prop="skuUseEn">
              <el-input v-model="FormData.skuUseEn"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="商品材质-中:" prop="skuMaterialCn">
              <el-input v-model="FormData.skuMaterialCn"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="3">
            <el-form-item label="商品材质-日:" prop="skuMaterialJp">
              <el-input v-model="FormData.skuMaterialJp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="3">
            <el-form-item label="商品材质-英:" prop="skuMaterialEn">
              <el-input v-model="FormData.skuMaterialEn"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="特殊属性:" prop="skuNameEn">
              <el-checkbox-group v-model="FormData.specialStatsList">
                <el-checkbox
                  :label="item.label"
                  v-for="(item, index) in special_attribute_list"
                  :key="index"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="HS编码:" prop="hsCode">
              <el-input v-model="FormData.hsCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="footer" slot="footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="close">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSkuClassByLanguage } from '@/api/platform/goodsClassDict'
import { useDict } from '@/utils/useDict'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { insertSkuByDistributor, initSkuNo } from '@/api/distribution/sku/BasicExpressCustoms'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: { Treeselect },
  data() {
    return {
      /**商品分类菜单树选项 */
      menuOptions: [],
      /**国内发货方式 */
      deliver_goods_cn_list: [],
      special_attribute_list: [],
      skuTypeList: [],
      // sku列表新增
      BasicExpressCustomsShow: false,
      FormData: {
        specialStatsList: [],
        skuNo: '',
        isExpired: '0',
      },
      rules: {
        skuNo: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuNameCn: [{ required: true, message: '请输入', trigger: 'blur' }],
        classId: [{ required: true, message: '请选择', trigger: 'blur' }],
        skuAttrLength: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuAttrWidth: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuAttrHeight: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuAttrWeight: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuLength: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuWidth: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuHeight: [{ required: true, message: '请输入', trigger: 'blur' }],
        box: [{ required: true, message: '请输入', trigger: 'blur' }],
        deliverWayCn: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },

  mounted() {
    useDict('deliver_goods_cn').then(
      ({ deliver_goods_cn }) => (this.deliver_goods_cn_list = deliver_goods_cn),
    )
    this.$getSkuClassList().then((res) => {
      this.menuOptions = res.menuOptions
    })
    useDict('special_attribute').then(
      ({ special_attribute }) => (this.special_attribute_list = special_attribute),
    )
  },

  methods: {
    setRate(id) {
      const rate = this.deliver_goods_cn_list.filter((i) => i.value == id)
      if (rate && rate.length > 0) {
        this.FormData.deliverRate = rate[0].dictValueRef
      }
    },
    // 重置表单数据
    resetFormData() {
      this.FormData = {
        specialStatsList: [],
        skuNo: '',
        isExpired: '0',
      }
    },
    autoPostSku() {
      initSkuNo().then((res) => {
        this.FormData.skuNo = res.data
      })
    },
    close() {
      this.resetFormData()
      this.handleAddData()
      this.$parent.getList()
    },
    handleAddData() {
      this.BasicExpressCustomsShow = !this.BasicExpressCustomsShow
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // let specialStats = ''
          // this.FormData.specialStatsList.map((item, index) => {
          //     if (index !== this.FormData.length - 1) {
          //         specialStats += `${item},`

          //     } else {
          //         specialStats += `${item}`
          //     }
          // })

          let arr = []
          this.FormData.specialStatsList.map((item) => {
            const exsitOne = this.special_attribute_list.filter((i) => i.label == item)
            if (exsitOne && exsitOne.length > 0) {
              arr.push(exsitOne[0].value)
            }
          })
          this.FormData.specialStats = arr.toString()

          insertSkuByDistributor(this.FormData).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.close()
            }
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.curentTitle {
  font-weight: 700;
  margin-top: 12px;
}

::v-deep .curentTitle::before {
  content: '';
  position: absolute;

  left: -4px;
  top: 14px;
  width: 2px;
  height: 50%;
  background: #1890ff;
}

.aotuGetSku {
  color: #1890ff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  line-height: 36px;
  height: 36px;
  display: flex;
  align-items: center;
}

.el-form-item {
  // margin-bottom: 10px!important;
}

.footer {
}
</style>
